<template>
  <div
    :style="{width: 100 / itemLen +'%'}"
    :class="['navitem' ,{active : index === tabIndex}]"
    @click="changeNavItem(index)"
  >{{ item.itemTitle }}</div>
</template>

<script>
export default {
    name: 'nav-item',
    props: ['item', 'itemLen', 'tabIndex', 'index'],
    methods: {
        changeNavItem(index) {
            this.$emit('changeNavItem', index);
        }
    }
}
</script>

<style scoped>
.navitem {
    height: 50px;
    float: left;
    text-align: center;
    cursor: pointer;
}

.active {
    background-color: #454545;
    color: #fff;
}
</style>